import QQMapWX from './libs/qqmap-wx-jssdk.min'
import Schema from 'async-validator'
import { reqAddAddress, reqAddressDetail, reqUpdateAddress } from '../../../api/address'
Page({
  // 页面的初始数据
  data: {
    name: '', // 收货人
    phone: '', // 手机号码
    provinceName: '', // 省
    provinceCode: '', // 省编码
    cityName: '', // 市
    cityCode: '', // 市编码
    districtName: '', // 区
    districtCode: '', // 区编码
    address: '', // 详细地址
    fullAddress: '', // 完整地址
    isDefault: false // 是否是默认地址
  },
  validateAddress(params) {
    // 验证收货人，是否只包含大小写字母、数字和中文字符
    const nameRegExp = '^[a-zA-Z\\d\\u4e00-\\u9fa5]+$'
    // 验证手机号
    const phoneReg = '^1(?:3\\d|4[4-9]|5[0-35-9]|6[67]|7[0-8]|8\\d|9\\d)\\d{8}$'
    const rules = {
      name: [
        { required: true, message: '请输入收货人姓名' },
        { pattern: nameRegExp, message: '收货人姓名不合法' }
      ],
      phone: [
        { required: true, message: '请输入收货人手机号' },
        { pattern: phoneReg, message: '手机号不合法' }
      ],
      provinceName: { required: true, message: '请选择收货人所在地区' },
      address: { required: true, message: '请输入详细地址' }
    }
    const validator = new Schema(rules)
    // 调用实例方法对数据进行验证
    // 注意：我们希望将验证结果通过 Promsie 的形式返回给函数的调用者
    return new Promise((resolve) => {
      validator.validate(params, (errors, fields) => {
        if (errors) {
          // 如果验证失败，需要给用户进行提示
          wx.toast({
            title: errors[0].message,
            mask: false
          })
          resolve({ valid: false })
        } else {
          resolve({ valid: true })
        }
      })
    })
  },
  // 保存收货地址
  async saveAddrssForm() {
    // 组织参数（完整地址+是否为默认值）
    const { provinceName, cityName, districtName, address, isDefault } = this.data
    // 组织后的数据
    const params = {
      ...this.data,
      fullAddress: provinceName + cityName + districtName + address,
      isDefault: isDefault ? 1 : 0
    }
    const { valid } = await this.validateAddress(params)
    // 要是验证不通过就return
    if (!valid) return
    this.addressId
      ? reqUpdateAddress(params).then(() => {
          this.handleAddressSuccess()
        })
      : reqAddAddress(params).then(() => {
          this.handleAddressSuccess()
        })
  },
  // 修改或者新增成功的提示和跳转
  handleAddressSuccess() {
    wx.navigateBack({
      success: () => {
        wx.showToast({
          title: this.addressId ? '更新收货地址成功' : '新增收货地址成功',
          icon: 'none'
        })
      }
    })
  },
  // 省市区选择
  onAddressChange(event) {
    const { code, value } = event.detail
    this.setData({
      provinceName: value[0],
      provinceCode: code[0],
      cityName: value[1],
      cityCode: code[1],
      districtName: value[2],
      districtCode: code[2]
    })
  },

  // 获取用户地理位置信息
  onLocation() {
    wx.chooseLocation().then((res) => {
      // latitude：纬度，longitude：经度，name：选择的时候的地点名字
      const { latitude, longitude, name } = res
      this.qqmapwx.reverseGeocoder({
        location: {
          longitude,
          latitude
        },
        success: (data) => {
          // 获取行政区划代码，省市区
          const { adcode, province, city, district } = data.result.ad_info
          // 获取街道门牌（可能为空）
          const { street, street_number } = data.result.address_component
          // 标准人性化地址
          const { standard_address } = data.result.formatted_addresses
          this.setData({
            // 省
            provinceName: province,
            // 如果是省，前 2 位有值，后面 4 位是 0
            provinceCode: adcode.replace(adcode.substring(2, 6), '0000'),

            // 市
            cityName: city,
            // 如果是市，前 4 位有值，后面 2 位是 0
            cityCode: adcode.replace(adcode.substring(4, 6), '00'),

            // 区
            // 东莞市、中山市、儋州市、嘉峪关市 因其下无区县级
            districtName: district,
            districtCode: district && adcode,

            // 详细地址以及完整地址，在以后开发中根据产品的需求来进行选择、处理即可
            // 组织详细地址
            address: street + street_number + name,
            // 组织完整地址
            fullAddress: standard_address + name
          })
        }
      })
    })
  },
  // 展示修改的地址信息
  async showAddressInfo(id) {
    // 要是没有id,就证明不是更新操作
    if (!id) return
    this.addressId = id
    // 动态设置当前页面的标题
    wx.setNavigationBarTitle({
      title: '修改收货地址'
    })
    const { data } = await reqAddressDetail(this.addressId)
    this.setData(data)
  },
  onLoad: function (options) {
    // 实例化API核心类
    this.qqmapwx = new QQMapWX({
      key: '7EUBZ-I2FCJ-SFDFE-DTKUS-QFLQE-CZBTO'
    })

    this.showAddressInfo(options.id)
  },
  onClose(event) {
    const { position, instance } = event.detail
    switch (position) {
      case 'left':
      case 'cell':
        instance.close()
        break
      case 'right':
        Dialog.confirm({
          message: '确定删除吗？'
        }).then(() => {
          instance.close()
        })
        break
    }
  }
})
